// 食品供应商
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Input, Button } from 'antd-mobile';
import { SearchOutlined } from '@ant-design/icons';
import axios from 'axios';
import './Food.css'
const Food = () => {
    const navigate = useNavigate();
    const [searchKeyword, setSearchKeyword] = useState(""); // 搜索关键词
    const [filteredEvents, setFilteredEvents] = useState([]); // 搜索结果

    const back = () => {
        navigate('/index/mine');
    };
    const handleSearch = (keyword) => {
        setSearchKeyword(keyword)
        axios.get('http://localhost:5000/waterlist', {
            params: { keyword },
        }).then(res => {
            setFilteredEvents(res.data.waterlist);
        })
    }
    useEffect(() => {
        handleSearch()
    }, [])
    return (
        <div>
            <div>
                <div className="AllBox">
                    <div>
                        <NavBar onBack={back}>食品供应商</NavBar>
                    </div>
                    <div className="SocialBox">
                        <Input
                            placeholder="请输入搜索"
                            prefix={<SearchOutlined />}
                            className="SocialSearch"
                            value={searchKeyword}
                            onChange={(val) => handleSearch(val)}
                        />
                    </div>
                    {filteredEvents.map(event => (
                        <div className="SocialTitle" key={event._id}>
                            <div style={{ marginLeft: 110 }}>
                                <h4>{event.name}</h4>
                                <div style={{ marginTop: "10px" }}>
                                    <span>{event.address}</span>
                                    <Button
                                        className="TitleOneButton"
                                        onClick={() => { navigate(`/ingredient`, { state: { itemD: event } })} }
                                    >
                                        查看
                                    </Button>
                                </div>
                            </div>
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}
export default Food